import React from 'react';
import {HashRouter, Route, Link, Switch} from 'react-router-dom'
import Main from './Main';
import About from './about';
import Topics from './topic';

export default class Demo extends React.Component{
    render() {
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/topics">Topics</Link></li>
                    </ul>
                    <hr/>
                    {/*组件里面写路由,太零散,不好管理*/}

                    {/* 第一种方法*/}
                    {/*<Switch>*/}
                        {/*<Route exact={true} path="/" component={Main}></Route>*/}
                        {/*<Route path="/about" component={About}></Route>*/}
                        {/*<Route path="/topics" component={Topics}></Route>*/}
                    {/*</Switch>*/}

                    {/* 第二种方法*/}
                    <Route exact={true} path="/" component={Main}></Route>
                    {/*当path为/的时候,加载component*/}
                    {/*exact=true 精确匹配*/}
                    <Route path="/about" component={About}></Route>
                    <Route path="/topics" component={Topics}></Route>
                </div>
            </HashRouter>
        )
    }
}
